<!-- 平面转换-平移案例 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>平面转换-平移案例</title>
    <style>

        .farther {
            /* position: relative; */
            display: flex;
            margin: 100px auto;
            background-image: url(../Pictures/车内-背景.jpg);
            background-size: contain;

            width: 910px;
            height: 400px;

            overflow: hidden;
            }

    
        .farther .left,
        .farther .right {
            /* position: absolute; */
            width: 455px;
            height: 400px;
            
            transition: all 1s;

        }

        .farther .left {
            background-image: url(../Pictures/黑车.jpg);
            background-size: contain;
        }

        .farther .right {
            background-image: url(../Pictures/白车.jpg);
            background-position: right 0;
            background-size: contain;
        }

        .farther:hover .left {
            transform: translate(-100%);
        }

        .farther:hover .right {
            transform: translateX(100%);
        }
   


    </style>
</head>
<body>
    <div class="farther">
        
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>